<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./girl.css">
    <title>Document</title>
</head>
<body>
    <!-- <div class="girl"></div> -->
    <div class="box" id="box">
        <p class="p">排 名</p>
    </div>
</body>
</html>
<script>
    let box = document.getElementById("box");
    class Girl {
        constructor(name){
            this.name = name;
            this.bx = 50;
            this.by = this.rand(50,500);
            this.addDiv()
        }


        // 随机数
        rand(min,max){
            return Math.floor(Math.random() * (max - min + 1) + min)
        }



        // 生成div
        addDiv(){
            this.div = document.createElement("div");
            this.div.setAttribute("class","girl");
            this.div.style.left = this.bx + "px";
            this.div.style.top = this.by + "px";
            this.div.innerText = this.name;
            this.index = 0;
            document.body.appendChild(this.div)
        }
        

        // 换图 + 移动
        go(){
            this.index++;
            if(this.index > 7){
                this.index = 0;
            }
            this.speed = this.rand(1,50);
            this.bx += this.speed;
            if(this.bx >= 1000){
                this.bx = 1000;
                this.index = 0
            }
            this.div.style.left = this.bx + "px"
            this.div.style.backgroundPositionX = -(79 * this.index) + "px";
        }


        // 更换图片为第一张
        stop(){
            this.div.style.backgroundPositionX = "0px";
        }





    }



    let objArr = [new Girl("杨婷"),new Girl("徐佳炜"),new Girl("孙一丹")];
    let rankArr = new Set();


    // 循环开始定时器
    let ti = setInterval(function(){
        for(let i = 0; i < objArr.length; i++){
            if(objArr[i].bx >= 1000){
                rankArr.add(objArr[i].name);
                objArr[i].stop();
                if(rankArr.size == 3){
                    clearInterval(ti);
                    let j = 1;
                    for(let i of rankArr){
                        box.innerHTML += `<p>${j++} : ${i}</p>` 
                    }
                    box.style.display = "block";
                    break;
                }
            }
            objArr[i].go();

        }
    },55)






</script>